﻿@{
    ViewData["Title"] = "首页";
}

<div class="container-fluid">
    <!-- 欢迎横幅 -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="bg-gradient-primary text-white p-5 rounded-3 shadow">
                <div class="row align-items-center">
                    <div class="col-md-8">
                        <h1 class="display-4 fw-bold mb-3">
                            <i class="fas fa-robot me-3"></i>欢迎使用智能客服系统
                        </h1>
                        <p class="lead mb-4">
                            基于先进AI技术的智能客服解决方案，专为制造执行系统(MES)设计，
                            提供24/7全天候智能支持服务。
                        </p>
                        <a href="@Url.Action("Index", "Chat")" class="btn btn-light btn-lg px-4">
                            <i class="fas fa-comments me-2"></i>开始对话
                        </a>
                    </div>
                    <div class="col-md-4 text-center">
                        <i class="fas fa-robot" style="font-size: 8rem; opacity: 0.8;"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 功能特性 -->
    <div class="row mb-5">
        <div class="col-12">
            <h2 class="text-center mb-5">
                <i class="fas fa-star text-warning me-2"></i>系统特性
            </h2>
        </div>
        
        <div class="col-md-4 mb-4">
            <div class="card h-100 border-0 shadow-sm">
                <div class="card-body text-center p-4">
                    <div class="bg-primary bg-opacity-10 rounded-circle d-inline-flex align-items-center justify-content-center mb-3" style="width: 80px; height: 80px;">
                        <i class="fas fa-brain text-primary" style="font-size: 2rem;"></i>
                    </div>
                    <h5 class="card-title fw-bold">AI智能对话</h5>
                    <p class="card-text text-muted">
                        基于LangChain.NET框架，支持自然语言理解和智能回复生成，
                        提供人性化的交互体验。
                    </p>
                </div>
            </div>
        </div>

        <div class="col-md-4 mb-4">
            <div class="card h-100 border-0 shadow-sm">
                <div class="card-body text-center p-4">
                    <div class="bg-success bg-opacity-10 rounded-circle d-inline-flex align-items-center justify-content-center mb-3" style="width: 80px; height: 80px;">
                        <i class="fas fa-cogs text-success" style="font-size: 2rem;"></i>
                    </div>
                    <h5 class="card-title fw-bold">MES系统集成</h5>
                    <p class="card-text text-muted">
                        深度集成制造执行系统，支持工单查询、生产计划调整、
                        设备状态监控等核心业务功能。
                    </p>
                </div>
            </div>
        </div>

        <div class="col-md-4 mb-4">
            <div class="card h-100 border-0 shadow-sm">
                <div class="card-body text-center p-4">
                    <div class="bg-info bg-opacity-10 rounded-circle d-inline-flex align-items-center justify-content-center mb-3" style="width: 80px; height: 80px;">
                        <i class="fas fa-database text-info" style="font-size: 2rem;"></i>
                    </div>
                    <h5 class="card-title fw-bold">智能知识库</h5>
                    <p class="card-text text-muted">
                        基于向量数据库的智能知识库系统，支持语义搜索和
                        知识检索，提供准确的技术支持和问题解答。
                    </p>
                </div>
            </div>
        </div>
    </div>

    <!-- 快速开始 -->
    <div class="row mb-5">
        <div class="col-12">
            <div class="card border-0 shadow">
                <div class="card-header bg-light">
                    <h4 class="mb-0">
                        <i class="fas fa-rocket text-primary me-2"></i>快速开始
                    </h4>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <div class="d-flex align-items-center p-3 border rounded">
                                <div class="bg-primary bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center me-3" style="width: 50px; height: 50px;">
                                    <span class="text-primary fw-bold">1</span>
                                </div>
                                <div>
                                    <h6 class="mb-1 fw-bold">开始智能对话</h6>
                                    <p class="mb-0 text-muted small">点击"智能客服"开始与AI助手对话</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6 mb-3">
                            <div class="d-flex align-items-center p-3 border rounded">
                                <div class="bg-primary bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center me-3" style="width: 50px; height: 50px;">
                                    <span class="text-primary fw-bold">2</span>
                                </div>
                                <div>
                                    <h6 class="mb-1 fw-bold">管理知识库</h6>
                                    <p class="mb-0 text-muted small">访问"知识库"管理技术文档和操作手册</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6 mb-3">
                            <div class="d-flex align-items-center p-3 border rounded">
                                <div class="bg-primary bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center me-3" style="width: 50px; height: 50px;">
                                    <span class="text-primary fw-bold">3</span>
                                </div>
                                <div>
                                    <h6 class="mb-1 fw-bold">查看对话历史</h6>
                                    <p class="mb-0 text-muted small">在对话界面查看完整的交互历史记录</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6 mb-3">
                            <div class="d-flex align-items-center p-3 border rounded">
                                <div class="bg-primary bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center me-3" style="width: 50px; height: 50px;">
                                    <span class="text-primary fw-bold">4</span>
                                </div>
                                <div>
                                    <h6 class="mb-1 fw-bold">评价服务质量</h6>
                                    <p class="mb-0 text-muted small">对AI回复进行评分，帮助系统持续改进</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 系统状态 -->
    <div class="row mb-5">
        <div class="col-12">
            <div class="card border-0 shadow">
                <div class="card-header bg-light">
                    <h4 class="mb-0">
                        <i class="fas fa-chart-line text-success me-2"></i>系统状态
                    </h4>
                </div>
                <div class="card-body">
                    <div class="row text-center">
                        <div class="col-md-3 mb-3">
                            <div class="p-3">
                                <i class="fas fa-server text-primary mb-2" style="font-size: 2rem;"></i>
                                <h5 class="mb-1">系统状态</h5>
                                <span class="badge bg-success">正常运行</span>
                            </div>
                        </div>
                        <div class="col-md-3 mb-3">
                            <div class="p-3">
                                <i class="fas fa-clock text-info mb-2" style="font-size: 2rem;"></i>
                                <h5 class="mb-1">响应时间</h5>
                                <span class="text-muted">&lt; 2秒</span>
                            </div>
                        </div>
                        <div class="col-md-3 mb-3">
                            <div class="p-3">
                                <i class="fas fa-users text-warning mb-2" style="font-size: 2rem;"></i>
                                <h5 class="mb-1">并发支持</h5>
                                <span class="text-muted">≥ 100用户</span>
                            </div>
                        </div>
                        <div class="col-md-3 mb-3">
                            <div class="p-3">
                                <i class="fas fa-shield-alt text-success mb-2" style="font-size: 2rem;"></i>
                                <h5 class="mb-1">可用性</h5>
                                <span class="text-muted">99.9%</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.bg-gradient-primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.card {
    transition: transform 0.2s ease-in-out;
}

.card:hover {
    transform: translateY(-5px);
}

.bg-primary {
    background-color: #667eea !important;
}

.btn-primary {
    background-color: #667eea;
    border-color: #667eea;
}

.btn-primary:hover {
    background-color: #5a6fd8;
    border-color: #5a6fd8;
}
</style>
